/*------------------------------------------------------------------
STYLES.CSS

Master Stylesheet
Project:	Feria Virtual
-------------------------------------------------------------------*/

@import "popups.css";
@import "text.css";
@import "interiorExterior.css";
@import "publicacionOfertas.css";

/*------------------------------------------------------------------
COLORS

# Light Grey (boxes): 			#BFBFBF
# Mid Grey (title shadows): 	#888888
# Light Grey (hr shadows): 		#AAAAAA
# Mid Red (AAREII Menu): 		#B10B0B
# Dark Red (AAREII Menu): 		#600000
# Brown (Button): 				#810E05
# Light Red (Button): 			#c62d1f
# Lighter Red (Button): 		#f24537
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
TYPOGRAPHY

# Everything: 					Open Sans Regular
# Titles and Headers: 			Oswald and Caps
# Menus: 						Open Sans Bold and Caps
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
GENERAL
-------------------------------------------------------------------*/

*
{
	padding:				0px;
	margin:					0px;
	font-family: 			'Open Sans', sans-serif;	
}

body
{
	background-image:		url(../features/images/texture1.png);
	overflow: 				auto;
}

a:link
{
	text-decoration:		none;
}

hr
{
	box-shadow: 			1.8px 1.8px 1px #AAAAAA;
	background-color: 		black;
	height: 				1px;
	border: 				0px;
}

.wrapper
{
	box-shadow: 			1px 3px 10px Black;
	background-color:		white;
	margin:					0 auto; 
	margin-bottom: 			2%;
	min-height: 			100%;
	overflow: 				hidden;
	width:					96%; 
}

.wrapperSmall{
	box-shadow: 			2px 2px 10px Black;
	margin:					auto; 
	width:					65%; 
}

.box{
	border:					1px solid #BFBFBF;
	background-color:		white;
	padding:				3%;
	height: 				100%;
	font-size: 				1.2vw;
}

.leftSide
{
	float: left;
}

.rightSide
{
	float: right;
}

.button
{
	box-shadow: 			1px 1px 2px Black;
	background:				-moz-linear-gradient(top, #B10B0B, #D00000);
	background:				-webkit-linear-gradient(top, #B10B0B, #D00000);
	border:					0px;
	color:					White;
	display:				inline-block;
	font-size: 				100%;
	height:					33px;
	line-height:			33px;
	padding: 			0 2% 2% 2%;
	text-decoration:		none;
	text-shadow:			1px 2px 0px #810E05;
}
	.button:hover
	{
		background:	    	-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #C62D1F), color-stop(1, #F24537) );
		background:			-moz-linear-gradient( center top, #C62D1F 5%, #F24537 100% );
		background-color:	#C62D1F;  
	}
	.button:active
	{
		position:			relative;
		top: 				1px;
	}

#nav
{
	background:			-moz-linear-gradient(top, #B10B0B, #600000);
	background:			-webkit-linear-gradient(top, #B10B0B, #600000);		/*#A11536*/
	background:			linear-gradient(to bottom, #B10B0B, #600000);
	margin-bottom:		100px;
	text-align:			center;	
	position:			fixed;
	top:				0;
	width:				100%;
	z-index:			1000;
	box-shadow:			0px 1px 1px #000000;	
	text-shadow: 		0.09em 0.09em #777777;
}
	#nav li
	{
		display:			inline;
		list-style-type:	none;
	}
	#nav li a
	{
		line-height:		240%;
		color:				white;
		display:  			inline-block;
		font-size: 			1.05vw;
		padding:      		0.2% 4%;

		/* Color Transition */
		-moz-transition:		all .3s ease-out;
		-webkit-transition:		all .3s ease-out;
		transition:				all .3s ease-out;	
	}	
	#nav li a:hover
	{
		background:		-moz-linear-gradient(top, 	#D00000, #600000);
		background:		-webkit-linear-gradient(top, #D00000, #600000);
		background:		linear-gradient(top, #D00000, #600000);
		box-shadow:		0px 1px 1px #000000;	
	}
	#nav li a:active
	{
		background:		-moz-linear-gradient(top, #CC0018, #100000);
		background:		-webkit-linear-gradient(top, #CC0018, #100000);
		box-shadow:		0px 1px 1px #000000;	
	}

.social
{
	margin-bottom: -10%
}

.social img
{
	width: 					15%;
	padding: 				0.5%;
}

	.social img:hover
	{
		/*Escalar*/
		-webkit-transform:		scale(1.6, 1.6);
		-o-transform:			scale(1.6, 1.6);
		-moz-transform:			scale(1.6, 1.6);
		transform:				scale(1.6, 1.6);

		/*Transicion*/
		-webkit-transition: 	all 0.15s ease-out;  	/* Chrome 1-25, Safari 3.2+ */
	    -moz-transition: 		all 0.15s ease-out;  	/* Firefox 4-15 */
	   	-o-transition: 			all 0.15s ease-out;  	/* Opera 10.50–12.00 */
	    transition: 			all 0.15s ease-out;  	/* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
	}

.footer
{
	height: 			auto;
	background-image: 	url(../features/images/texture2.png);
	color:				white;
	font-size: 			1vw;
	text-shadow: 		0.09em 0.09em #777777;
}

/*------------------------------------------------------------------
INSCRIPCION
-------------------------------------------------------------------*/

#content
{
		margin:				30px	0px;
}

#subscriptionContent
{
		margin: 			3% auto;
		width:				68%;
}


/*------------------------------------------------------------------
OTROS
-------------------------------------------------------------------*/

.ribbon{
	background-color:		#F0F0F0;
	padding-top:			30px;
	padding-bottom:     	10px;
	width:					100%;
}

#contenedor{
	border:					1px solid red;
	width:					600px;
}

.preview{
	height:					200px;
	border:					1px solid blue;
}

/* Banner publicitario dinámico */
.content-item { 
	width: 					300px; 
	background-position: 	50%; 
	height: 				200px; 
	margin: 				5px 20px;  
	overflow: 				hidden;  
	position: 				absolute;
	left: 					2%;
	top: 					-10%
}
.content-item .overlay 
{ 
	border: 				30px solid #DA251D; 
	border-radius: 			15px; 
	bottom: 				0;  
	height: 				0;  
	opacity: 				.95;  
	position:				absolute;  
	right: 					0; 
	text-indent: 			-9999px;  
	-webkit-transition: 	all 0.5s ease-out;  
	-moz-transition: 		all 0.5s ease-out;  
	-o-transition: 			all 0.5s ease-out;  
	transition: 			all 0.5s ease-out;  
	width:					0;
}

.content-item:hover .overlay
{  
	border: 				180px solid #78221F;  
	border-radius: 			0px; 
	-webkit-transition: 	all 0.5s ease-out;  
	-moz-transition: 		all 0.5s ease-out;  
	-o-transition: 			all 0.5s ease-out;
  	transition: 			all 0.5s ease-out;
 }

.content-item .corner-overlay-content 
{  
	bottom: 				15px;  
	color: 					#FFF;  
	position: 				absolute;  
	right: 					-48.8%;  
	top: 					73%;
	-webkit-transition: 	all 0.5s ease-out;  
	-moz-transition: 		all 0.5s ease-out;  
	-o-transition: 			all 0.5s ease-out;
 	transition: 			all 0.5s ease-out;
 }

.content-item:hover .corner-overlay-content {  
	opacity: 				0;  
	-webkit-transition: 	all 0.5s ease-out;  
	-moz-transition: 		all 0.5s ease-out;  
	-o-transition: 			all 0.5s ease-out;  
	transition: 			all 0.5s ease-out;
 }

.content-item .overlay-content 
{  bottom: 0;  color: #FFF;  left: 0;  opacity: 0;  padding: 30px;  position: absolute;  right: 0;  top: 0;  -webkit-transition: all 0.3s ease-out;  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;  transition: all 0.3s ease-out;}
.content-item .overlay-content h2 
{  border-bottom: 1px solid #FFF;  padding: 0 0 12px;}
.content-item:hover .overlay-content 
{  opacity: 1;  -webkit-transition: all 0.3s ease-out;  -moz-transition: all 0.3s ease-out;  -o-transition: all 0.3s ease-out;  transition: all 0.3s ease-out;  -webkit-transition-delay: 0.3s;  -moz-transition-delay: 0.3s;  -o-transition-delay: 0.3s;  transition-delay: 0.3s;}
/* FIN Banner publicitario dinámico */

.container{
	width: 			100%;
	position: 		relative;
	text-align: 	center;
}

.ac-container{ 
    width: 			100%; 
    margin: 		10px auto 30px auto; 
} 

.ac-container label{ 
    font-family: 	'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; 
    padding: 		5px 20px; 
    position: 		relative; 
    z-index: 		20; 
    display: 		block; 
    height: 		30px; 
    cursor: 		pointer; 
    color: 			#777; 
    text-shadow: 	1px 1px 1px rgba(255,255,255,0.8); 
    line-height: 	33px; 
    font-size: 		19px; 
    background:     -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1); 
} 

/* Al posar el puntero cambiamos el color de fondo */ 
.ac-container label:hover{ 
    background: 	#DAD5D5; 
} 

.ac-container input:checked + label, 
.ac-container input:checked + label:hover{ 
    background:		#DAD5D5;  
    color: 			#3d7489; 
    text-shadow: 	0px 1px 1px rgba(255,255,255, 0.6); 
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1); 
} 

.ac-container label:hover:after, 
.ac-container input:checked + label:hover:after{ 
    content: ''; 
    position: 		absolute; 
    width: 			24px; 
    height: 		24px; 
    right: 			13px; 
    top: 			7px; 
    background:		transparent url(../features/images/arrow_down.png) no-repeat center center; 
}

.ac-container input:checked + label:hover:after{ 
    background-image: url(../features/images/arrow_up.png); 
} 

.ac-container input{ 
    display: 		none; 
} 

.ac-container article{ 
    background: 	rgba(255, 255, 255, 0.5); 
    margin-top: 	-1px; 
    overflow: 		hidden; 
    height: 		0px; 
    position: 		relative; 
    z-index: 		10; 
    transition: 
        height 0.3s ease-in-out, 
        box-shadow 0.6s linear; 
} 
.ac-container input:checked ~ article{ 
    transition: 
        height 0.5s ease-in-out, 
        box-shadow 0.1s linear; 
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); 
} 

.ac-container article p{ 
    font-style: 	italic; 
    color: 			#777; 
    line-height: 	23px; 
    font-size: 		14px; 
    padding: 		20px; 
    text-shadow: 	1px 1px 1px rgba(255,255,255,0.8); 
} 

.ac-container input:checked ~ article.ac-small{ 
    height: 		140px; 
} 
.ac-container input:checked ~ article.ac-medium{ 
    height: 		180px; 
} 
.ac-container input:checked ~ article.ac-large{ 
    height: 		230px; 
}

#matriculatedUser{
	color: 			green;
	font-size: 		100%;
	text-shadow: 	1px 1px 1px rgba(255,255,255,0.8);
	font-family:	"Verdana";
	font-weight: 	bold;
}

#nonmatriculatedUser{
	color: 			red;
	font-size: 		100%;
	text-shadow: 	1px 1px 1px rgba(255,255,255,0.8);
	font-family:	"Verdana";
	font-weight:	bold;
}